<template>
  <div class="banner">
    <div class="banner_item" v-for="(item,index) in bannerList" :key="index">
      <img @click="banner_detail(item)" :src="item.image" />
    </div>
    <el-drawer
      :title="title"
      v-if="drawer"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="50%"
    >
      <div v-html="body" style="height:1000px;width:100%;overflow:auto;padding:20px 150px"></div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      direction: "rtl",
      bannerList: [
        {
          image: require("../assets/images/abanner01.jpg"),
          title: "软件设计大赛",
          content: "软件设计大赛开始啦，快来报名"
        },
        {
          image: require("../assets/images/abanner02.jpg"),
          title: "了解软开",
          content: "快来了解软开呀"
        },
        {
          image: require("../assets/images/abanner03.jpg"),
          title: "网页设计大赛",
          content: "网页设计大赛开始啦，快来报名"
        },
        {
          image: require("../assets/images/abanner04.jpg"),
          title: "知识拓展竞赛",
          content: "知识拓展竞赛开始啦，加油呀"
        }
      ]
    };
  },
  created(){
    this.fetchEvent()
  },
  methods: {
    jump(url) {
      window.location.href = url;
    },
    banner_detail(item) {
      this.drawer = true;
      this.title = item.title;
      this.body = item.content;
    },
    handleClose(done) {
      done();
    },
    async fetchEvent(){
      const res =await this.$http.get('/events')
      this.bannerList=res.data.infos.list
      this.bannerList.forEach((list)=>{
        list.image = 'http://121.199.23.187:8080/static/images/event/'+list.pic
      })
      this.bannerList = this.bannerList.filter(item => item.type === 0)
    }
  }
};
</script>

<style scoped lang="scss">
.banner {
  margin-left: 19.5%;
  width: 1200px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-top: 1px solid #ffffff;
  padding: 0 10px;
  .banner_item {
    width: 50%;
    display: flex;
    padding-top: 15px;
    flex-direction: row;
    img {
      width: 590px;
      height: 160px;
    }
  }
}

/* drawer的标题 */
.el-drawer__header > :first-child {
  font-size: 20px;
  text-align: center;
  font-weight: bold;
}
</style>